<template>
  <div class="page">
    <v-pageTitle title="加班统计"></v-pageTitle>
    <!--工具条-->
    <v-pageToolbar align="left">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="加班时间">
          <el-date-picker
            size="small"
            v-model="formSearch.valueMonth"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <v-pageTable>
        <el-table v-loading="tableData.loading" :data="tableData.body" border style="width: 100%" @selection-change="selsChange" :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column v-for="(item,index) in tableData.head" :prop="item.key" :label="item.name" sortable :key="index"  min-width="150">
            </el-table-column>
        </el-table>
    </v-pageTable>
    <!-- 图表 -->
    <v-pageToolbar align='left'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <h4>个人加班走势图</h4>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <div id="myChart" style="margin-top:20px;"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formSearch:{
          valueMonth: new Date()
        },
        tableData: {
            loading: true,
            head: [],
            body: []
        },
        paginationTotal: 100,
        sels:[]
      }
    },
    methods: {
      onSearch(){
        console.log(formSearch)
      },
      getTableData(data) {
          // ajax 查询表格数据
          this.tableData.head = [
              {
                  key: 'date',
                  name: '日期-月'
              },
              {
                  key: 'time1',
                  name: '加班时间'
              },
              {
                  key: 'time2',
                  name: '请假时间'
              },
              {
                  key: 'sum',
                  name: '合计'
              }
          ]
          this.tableData.body = [
            {
              date: '2017-11',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-10',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-09',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-08',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-07',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-06',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-05',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-04',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-03',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-02',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-01',
              time1: '20',
              time2: '7',
              sum: '13'
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData.loading = false
          }, 1000)
      },
      selsChange: function (sels) {
				this.sels = sels;
			},
      drawLine(){
        // 基于准备好的dom
        var mainContainer = document.getElementById('myChart');
        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeMainContainer = function () {
            mainContainer.style.width = window.innerWidth*0.85+'px';
            mainContainer.style.height = window.innerHeight*0.5+'px';
        };
        //设置div容器高宽
        resizeMainContainer();
        // 初始化echarts实例
        var myChart = this.$echarts.init(mainContainer);  
        // 绘制图表
        myChart.setOption({
          title: {
              text: '',
              left: 'center',
              subtext: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              left: '10%',
              data:['工作时长']
          },
          toolbox: {
              right: '10%',
              show: true,
              feature: {
                  dataZoom: {
                      yAxisIndex: 'none'
                  },
                  dataView: {readOnly: false},
                  magicType: {type: ['line', 'bar']},
                  restore: {},
                  saveAsImage: {}
              }
          },
          xAxis:  {
              type: 'category',
              boundaryGap: false,
              data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                  formatter: '{value} h'
              }
          },
          series: [
              {
                  name:'工作时长',
                  type:'line',
                  data:[7.5, 11, 8, 7.5, 12, 8, 10],
                  markPoint: {
                      data: [
                          {type: 'max', name: '最大值'},
                          {type: 'min', name: '最小值'}
                      ]
                  },
                  markLine: {
                      itemStyle:{
                        normal:{lineStyle:{type:'dashed',color:'#000'},
                        label:{show:true,position:'end'}}
                      },
                      large:true,
                      effect:{
                        show: false,
                        loop: true,
                        period: 0,
                        scaleSize : 2,
                        color : null,
                        shadowColor : null,
                        shadowBlur : null
                      },
                      data:[
                      [
                          {
                            name: '标线1起点', 
                            value: '最小工作时长', 
                            xAxis: '周一', 
                            yAxis: 7.5,
                            label: {
                              normal: {
                                show: true,
                                position: 'end',
                              },
                            }
                          },      // 当xAxis为类目轴时，数值1会被理解为类目轴的index，通过xAxis:-1|MAXNUMBER可以让线到达grid边缘
                          {name: '标线1终点', xAxis: '周日', yAxis: 7.5},             // 当xAxis为类目轴时，字符串‘周三‘会被理解为与类目轴的文本进行匹配
                      ]
                    ]
                  }
              }
          ]
        });
        // 自适应
        window.onresize = function(){
          mainContainer.style.width = window.innerWidth*0.85+'px';
          mainContainer.style.height = window.innerHeight*0.5+'px';
          myChart.resize();
        }
      }
    },
    mounted() {
        // 获取table数据
        this.getTableData()
        // 绘制图表
        this.drawLine()
    }
  }
</script>